<template>
  <div>
    <!-- <p>{{ message }}</p> -->
    <el-button type="primary" @click="logout">退出登录</el-button>
    <div style="margin: 10px 0">
      <el-button type="warning" plain @click="add">新增</el-button>
    </div>

    <!-- <div>
      <el-input
        style="width: 20%"
        v-model="id1"
        placeholder="请输入id"
      ></el-input>
      <el-button type="success" plain @click="search">搜索</el-button>
    </div> -->
    <el-table :data="users" border stripe style="width: 100%">
      <el-table-column prop="id" label="ID" > </el-table-column>
      <el-table-column prop="username" label="用户名" > </el-table-column>
      <el-table-column prop="email" label="email"> </el-table-column>
      <!-- <el-table-column prop="state" label="订单状态"> </el-table-column> -->
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <div style="display: flex; align-content: space-between">
            <el-button @click="handleEdit(scope.row)" type="primary">
              编辑
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 100px"></div>

    <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="70px" :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            type="password"
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户权限">
        <el-select v-model="form.role" multiple>
          <el-option label="user" value="user"></el-option>
          <el-option label="mod" value="mod" ></el-option>
          <el-option label="admin" value="admin" ></el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      users: [],
      // id1: 0,
      form: {
        username: "",
        email: "",
        password: "",
        role: []
      },
      dialogVisible: false,
      message:"请登录以获取资源",
    };
  },
  created() {
    this.load();
    this.fetchResource();
  },
  
  methods: {
    fetchResource() {
      this.$axios
        .get("http://localhost:8080/api/test/admin", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          // console.log(res.data);
          this.$set(this, 'message', res.data);
          // console.log(res);
        })
        .catch((error) => console.log(error));;
    },
    logout() {
        // 从 localStorage 中删除 jwt
      localStorage.removeItem('token');
      
      // 跳转到登录页面
      this.$router.push('/');
      },
    handleEdit(row) {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    handleDelete(id) {
      console.log(id);
      this.$axios
        .delete(`http://localhost:8080/api/users/${id}`, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
          this.load(); //重新加载
        });
    },
    load() {
      this.$axios
        .get("http://localhost:8080/api/users/", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
        .then((res) => {
          this.users = res.data;
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
       if (this.form.id) {
        //更新
        this.$axios
          .put(`http://localhost:8080/api/users/${this.form.id}`, this.form, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          }, // 携带 JWT
        })
          .then((res) => {
            console.log(res);
            if (res.status === 200) {
              this.$message({
                type: "success",
                message: "更新成功",
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
            this.load(); //刷新表格数据
            //this.dialogVisible = false; //关闭弹窗
          });
      } else  {
        this.$axios
          .post("http://localhost:8080/api/auth/signup", this.form)
          .then(() => {
            console.log("success!");
            this.load(); //刷新表格数据
          })
          .catch((error) => console.log(error));
      }
      this.dialogVisible = false; //关闭弹窗
    },
  },
};
</script>

<style scoped>
</style>


